<template>
  <div v-for="(item, index) in combinations" :key="index">
    <div v-if="props.label === 'vertical'" class="leading-20px text-14px category-title mb-16px">
      {{ item.title }}:<span>{{ props.spuName }}</span>
    </div>
    <div class="flex cursor-pointer mb-24px items-start">
      <div
        v-if="props.label === 'horizontal'"
        :style="{ width: `${props.labelWidth}px`, 'flex-shrink': 0 }"
        class="text-16px text-white mr-11px flex items-start flex-col"
      >
        {{ item.title }}:<span
          v-if="props.spuName && props.spuName.length > 0"
          class="text-12px color-white-opacity-8 mt-6px"
          >({{ props.spuName }})</span
        >
      </div>
      <div class="flex flex-wrap">
        <div
          v-for="(option, idx) in item.options"
          :key="idx"
          :style="actives[index] === option.value ? btnActiveStyle : btnDefaultStyle"
          class="w-162px h-40px category-item text-center leading-40px text-16px rounded-4px"
          :class="{
            'mr-24px': (idx + 1) % 3 !== 0,
            active: actives[index] === option.value,
            'mt-12px': idx > 2
          }"
          @click="select(option, index)"
        >
          {{ option.value }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType, computed, unref, ref, toRaw, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
const props = defineProps({
  combination: {
    type: Array as PropType<any>,
    default: () => []
  },
  skuList: {
    type: Array as PropType<any>,
    default: () => []
  },
  defaultActive: {
    type: Array as PropType<any>,
    default: () => []
  },
  label: {
    type: String as PropType<'horizontal' | 'vertical'>,
    default: 'vertical'
  },
  labelWidth: {
    type: Number,
    default: 120
  },
  btnDefaultStyle: {
    type: Object,
    default: () => ({})
  },
  btnActiveStyle: {
    type: Object,
    default: () => ({})
  },
  spuName: {
    type: String,
    default: ''
  }
})
const route = useRoute()
const combinationData = computed(() => {
  const res: any = []
  const tmp = new Map()
  props.skuList?.forEach((c) => {
    if (c.combination) {
      const combination = JSON.parse(c.combination as any) as any
      combination.forEach((s) => {
        if (tmp.has(s.key)) {
          const exist = tmp.get(s.key)
          exist.push(s)
          tmp.set(s.key, exist)
        } else {
          tmp.set(s.key, [s])
        }
      })
    }
  })
  for (const x of tmp) {
    const set = new Set()
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [_, value] = x
    value.forEach((v) => set.add(JSON.stringify(v)))
    res.push([...set].map((c) => JSON.parse(c as string)))
  }
  return res
})
const emit = defineEmits(['on-change'])
const select = (option, index) => {
  actives.value.splice(index, 1, option.value)
  emit('on-change', toRaw(unref(actives)))
}
const combinations = computed(() => {
  return combinationData.value.map((c) => ({
    title: c[0].key,
    options: c
  }))
})
const actives = ref<any>([])
onMounted(() => {
  const defaultSku = props.skuList?.find((c) => Number(c.is_default) === 1)
  if (!defaultSku) return
  const combination = JSON.parse(defaultSku.combination || '[]')
  actives.value = combination.map((v) => v.value)
})

watch(
  () => route.params.id,
  (v) => {
    if (v) {
      const defaultSku = props.skuList?.find((c) => Number(c.is_default) === 1)
      if (!defaultSku) return
      const combination = JSON.parse(defaultSku.combination || '[]')
      actives.value = combination.map((v) => v.value)
    }
  }
)
</script>

<style scoped>
.category-title {
  color: #ababab;
  font-weight: 350;
}
.category-item {
  border: 1px solid #ababab;
  font-weight: 400;
}
.category-item.active {
  background-color: #edf2ff;
  border: 1px solid #4979ff;
  color: #4979ff;
  font-weight: 500;
}
</style>
